<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="css/log.css">
    <script src="js/bootstrap.min.js"></script>
    <link rel="import" href="menu.html" />
</head>
<body>

<from action="#" class="login-form">
    <h1>Login</h1>

    <div class="textb">
        <input type="text">
        <span data-placeholder="Username"></span>
    </div>

    <div class="textb">
        <input type="password">
        <span data-placeholder="Password"></span>
    </div>

    <input type="submit" class="loginbtn" value="Login">

    <!-- <div class="button-text">
        Don't have account?<a href="#">Sign up</a>
    </div> -->
    <hr>
    <br>
    <div class="github">
        <div class="col-sm-offset-2 col-sm-10">
            <a
                    href="https://github.com/login/oauth/authorize?client_id=724df6f6252b3c341a39&redirect_uri=http://localhost:8080/callback&scope=user&state=1">
                <img src="../static/images/Github.png" height="32" width="32" title="Github登录" />
            </a>

        </div>
    </div>

</from>

<!-- 放在form表单之后才生效 -->
<script type="text/javascript">
    $(".textb input").on("focus", function () {
        $(this).addClass("focus");
    });

    $(".textb input").on("blur", function () {
        if ($(this).val() == "")
            $(this).removeClass("focus");
    });
</script>

</body>
</html>